import React, { useState, useEffect, useMemo } from "react";
import { Form, Tooltip, Button, Select, DatePicker, Input } from "antd";
import { SearchOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
import moment from "moment";
import AntdWrapper from "@/components/AntdWrapper";
import { customTrimFunc } from "@/utils/utils.jsx";
import IconFont from "@/components/IconFont";
import { queryBusinessTypes, queryOperationTypes, queryUser } from "../../service";

const { Option } = Select;
const { RangePicker } = DatePicker;

const SearchContent = ({ visible, query, handleSetQuery, handleSearch }) => {
	const [form] = Form.useForm();

	const [businessTypeList, setBusinessTypeList] = useState([]); //业务类型列表
	const [operationTypeList, setOperationTypeList] = useState([]); //操作类型列表
	const [userData, setUserData] = useState([]); //操作人
	const [selectBusiness, setSelectBusiness] = useState(""); //选择的业务类型

	useEffect(() => {
		form.resetFields();
	}, [query]);

	useEffect(() => {
		if (visible) {
			getBusinessTypes();
			getUserList();
		}
	}, [visible]);

	useEffect(() => {
		if (visible && selectBusiness) {
			getOperationTypes();
		}
	}, [visible, selectBusiness]);

	//获取业务类型列表
	const getBusinessTypes = async () => {
		const { data = [], success } = await queryBusinessTypes();
		if (success) {
			setBusinessTypeList(data);
			if (data.length) {
				setSelectBusiness(data[0].value);
				form.setFieldsValue({
					businessType: data[0].value
				});
				handleSearch({
					businessType: data[0].value
				});
			}
		}
	};

	//获取操作类型列表
	const getOperationTypes = async () => {
		const { data = [], success } = await queryOperationTypes({
			businessType: selectBusiness
		});
		if (success) {
			setOperationTypeList(data);
		}
	};

	//操作人列表
	const getUserList = async username => {
		const { data, success } = await queryUser({
			username,
			current: 1,
			size: 20
		});
		if (success) {
			setUserData(data);
		}
	};

	//点击重置
	const onReset = () => {
		setSelectBusiness(businessTypeList[0].value);
		handleSearch({
			businessType: businessTypeList[0].value
		});
	};

	//渲染操作人
	const renderSubUser = item => {
		if (item.account) {
			if (item.name) {
				return item.name + "(" + item.account + ")";
			} else {
				return item.account;
			}
		} else {
			return "";
		}
	};

	//业务类型
	const businessTypeOptions = (businessTypeList || []).map(d => (
		<Option value={d.value} key={d.value} label={d.name}>
			<Tooltip title={d.name}>{d.name}</Tooltip>
		</Option>
	));

	//操作类型
	const operationTypeListOptions = (operationTypeList || []).map(d => (
		<Option value={d.value} key={d.value} label={d.name}>
			<Tooltip title={d.name}>{d.name}</Tooltip>
		</Option>
	));

	//操作人列表
	const optionRefundUserList = (userData || []).map(item => (
		<Option key={item.id}>
			<Tooltip title={renderSubUser(item)}>{renderSubUser(item)}</Tooltip>
		</Option>
	));

	return (
		<Form
			form={form}
			className="new-search-form-style"
			onFinish={() => handleSearch(customTrimFunc(form.getFieldValue()))}
			name="express-warning-search-form"
			initialValues={{ ...query }}
		>
			<div style={{ display: "flex", flexWrap: "wrap" }}>
				<AntdWrapper style={{ width: "210px" }}>
					<Form.Item label="" name="businessType" colon={false}>
						<Select
							onChange={e => {
								setSelectBusiness(e);
								handleSetQuery({
									businessType: e
								});
							}}
							placeholder="所属平台"
							allowClear
							value={selectBusiness}
						>
							{businessTypeOptions}
						</Select>
					</Form.Item>
				</AntdWrapper>
				<AntdWrapper style={{ width: "210px" }}>
					<Form.Item label="" name="operationType" colon={false}>
						<Select placeholder="操作类型">{operationTypeListOptions}</Select>
					</Form.Item>
				</AntdWrapper>

				<AntdWrapper style={{ width: "210px" }}>
					<Form.Item label="" name="userId" colon={false}>
						<Select
							showSearch
							placeholder="请选择操作人"
							filterOption={(input, option) => {
								return option.children.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
							}}
							onSearch={getUserList}
							allowClear
						>
							{optionRefundUserList}
						</Select>
					</Form.Item>
				</AntdWrapper>

				<AntdWrapper style={{ width: 210 }}>
					<Form.Item name={`${selectBusiness == 10 ? "businessName" : "ecStoreName"}`} style={{ marginRight: 6 }}>
						<Input placeholder={`${selectBusiness == 10 ? "店铺分组" : "店铺"}`} />
					</Form.Item>
				</AntdWrapper>

				<AntdWrapper style={{ width: 444 }}>
					<Form.Item name="operationTime" style={{ marginRight: 6 }}>
						<RangePicker placeholder={["开始时间", "结束时间"]} format="YYYY-MM-DD HH:mm:ss" showTime style={{ width: "100%" }} />
					</Form.Item>
				</AntdWrapper>

				<Form.Item label=" " colon={false} style={{ width: 210 }}>
					<Button
						type="primary"
						htmlType="submit"
						style={{ marginRight: "8px", height: "32px", fontSize: "12px" }}
						shape="round"
						icon={<SearchOutlined />}
					>
						查询
					</Button>
					<Button onClick={onReset} shape="round" icon={<IconFont type="iconformReset" />} className="newRoundBtn">
						重置
					</Button>
				</Form.Item>
			</div>
		</Form>
	);
};

export default SearchContent;
